<template>
	<div class="container" @click="handleGalleryClick">
		<div class="wrapper">
			<swiper :options="swiperOption">
			    <swiper-slide v-for="(item,index) in imgs" :key="index">
			    		<img class="gallery-img" :src="item"/>
			    </swiper-slide>
			    <!--显示分页-->
			    <div class="swiper-pagination"  slot="pagination"></div>
		    </swiper>
		</div>
	</div>
</template>

<script>

export default {
  name: 'CommonGallery',
  props: {
  	imgs: {
  		type:Array,
  		default () {
  			return []
  		}
  	}
  },
  data () {
  	return {
  		swiperOption: {
  			pagination: '.swiper-pagination',
  			paginationType: 'fraction',
			observerParents: true,
			observer: true
  		}
  	}
  },
  methods: {
  	handleGalleryClick () {
  		this.$emit('close')
  	}
  }
  
}
</script>

<style lang="stylus" scoped>
	.container >>> .swiper-container
		overflow:inherit
	.container
		display: flex
		flex-direction: column
		justify-content: center
		z-index: 99
		position: fixed
		left: 0
		right: 0
		top: 0
		bottom: 0
		background: #000
	
		.wrapper
			width: 100%
			height: 0
			/*overflow: hidden*/
			padding-bottom: 100%
			background: pink
			.gallery-img
				width: 100%
			.swiper-pagination
				color:#fff
				bottom: -1rem
			
				
				
	
</style>